<template>
    <div style="width: 100%">
        <div
            class="nav-bar-container"
            :style="{width: 'calc(100vw - ' + (sidebarWidth + 60) + 'px)'}"
            :class="systemSettings.fixedHeader ? 'nav-bar-fixed' : ''"
        >
            <!--    展开/收起    -->
            <i
                :class="collapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
                @click="triggerCollapse"
            />

            <!--    面包屑    -->
            <breadcrumb style="margin-left: 20px" />

            <el-link
                :underline="false"
                href="javascript:void(0)"
                style="font-size: 18px; margin-left: 20px; z-index: 3;"
                @click="$store.commit('reloadMainPage')"
            >
                <i class="el-icon-view el-icon-refresh" />
            </el-link>

            <div class="flex_right">
                <!-- 全屏/退出全屏 -->
                <Fullscreen />

                <!-- 语言切换 -->
                <Language />
            </div>
        </div>
        <!-- 占位 -->
        <div
            v-if="systemSettings.fixedHeader"
            class="nav-bar-symbolic"
        />
    </div>
</template>

<script>
import Language from '../language/Index'
import Fullscreen from '../fullscreen/Index'
import breadcrumb from '../breadcrumb/Index'
import {mapMutations, mapState} from 'vuex'

export default {
    name: "Index",
    components: {breadcrumb, Language, Fullscreen},
    computed: {
        ...mapState({
            collapse: state => state.collapse,
            // 左侧菜单宽度
            sidebarWidth: state => state.sidebarWidth,
            // 系统设置
            systemSettings: state => state.systemSettings,
        })
    },
    methods: {
        ...mapMutations({
            triggerCollapse: 'triggerCollapse',
        })
    }
}
</script>

<style scoped lang="scss">

    $navBarHeight: 56px;

    .nav-bar-container {
        z-index: 3;
        display: flex;
        padding: 0 30px;
        align-items: center;
        background-color: white;
        height: #{$navBarHeight};
        border-bottom: 1px solid #E4E7ED;
    }

    .nav-bar-fixed {
        position: fixed;
        top: 0;
    }

    .nav-bar-symbolic {
        height: #{$navBarHeight + 1};
    }

    .flex_right {
        left: -30px;
        height: 99%;
        display: flex;
        flex: 1 1 auto;
        position: relative;
        align-items: flex-start;
        justify-content: flex-end;
    }

    .el-icon-s-fold, .el-icon-s-unfold {
        font-size: 28px;
        cursor: pointer;
    }
</style>
